<script setup>
import { ref } from "vue";
import { formatTime } from "@/utils/format";

const visibleDrawer = ref(false);
const orderDetail = ref({});

// 订单状态映射
const statusMap = {
  0: "待付款",
  1: "待发货",
  2: "已发货",
  3: "已收货",
  4: "已取消",
};

const handleOpen = async (row) => {
  visibleDrawer.value = true;
  orderDetail.value = { ...row }; // 复制行数据
};

defineExpose({
  handleOpen,
});
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    title="订单详情"
    direction="rtl"
    size="50%"
  >
    <el-card style="max-width: 100%">
      <el-form
        :model="orderDetail"
        label-width="120px"
        style="margin-top: 20px"
      >
        <el-form-item label="订单编号" prop="orderId">
          <el-input v-model="orderDetail.orderId" disabled />
        </el-form-item>

        <el-form-item label="购买用户ID" prop="userId">
          <el-input v-model="orderDetail.userId" disabled />
        </el-form-item>

        <el-form-item label="农户ID" prop="farmerId">
          <el-input v-model="orderDetail.farmerId" disabled />
        </el-form-item>

        <el-form-item label="产品ID" prop="productId">
          <el-input v-model="orderDetail.productId" disabled />
        </el-form-item>

        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="orderDetail.productName" disabled />
        </el-form-item>

        <el-form-item label="购买数量" prop="quantity">
          <el-input v-model="orderDetail.quantity" disabled />
        </el-form-item>

        <el-form-item label="购买时单价" prop="unitPrice">
          <el-input v-model="orderDetail.unitPrice" disabled />
        </el-form-item>

        <el-form-item label="总价" prop="totalPrice">
          <el-input v-model="orderDetail.totalPrice" disabled />
        </el-form-item>

        <el-form-item label="订单状态" prop="status">
          <el-input
            v-model="statusMap[orderDetail.status]"
            disabled
            :placeholder="orderDetail.status === null ? '未知状态' : ''"
          />
        </el-form-item>

        <el-form-item label="交易编号" prop="transactionId">
          <el-input v-model="orderDetail.transactionId" disabled />
        </el-form-item>

        <el-form-item label="支付时间" prop="paymentTime">
          <el-input :value="formatTime(orderDetail.paymentTime)" disabled />
        </el-form-item>

        <el-form-item label="发货时间" prop="deliveryTime">
          <el-input :value="formatTime(orderDetail.deliveryTime)" disabled />
        </el-form-item>

        <el-form-item label="收货时间" prop="receiptTime">
          <el-input :value="formatTime(orderDetail.receiptTime)" disabled />
        </el-form-item>

        <el-form-item label="收货地址" prop="shippingAddress">
          <el-input v-model="orderDetail.shippingAddress" disabled />
        </el-form-item>

        <el-form-item label="收货人姓名" prop="receiptName">
          <el-input v-model="orderDetail.receiptName" disabled />
        </el-form-item>

        <el-form-item label="收货人电话" prop="receiptPhone">
          <el-input v-model="orderDetail.receiptPhone" disabled />
        </el-form-item>

        <el-form-item label="创建时间" prop="createTime">
          <el-input :value="formatTime(orderDetail.createTime)" disabled />
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>
